<template>
    <div class="Father">
        <h2>父组件</h2>
        {{ username }}
        {{ password }}
        <!-- v-model用在html标签上，双向绑定 -->
        <!-- <input type="text" v-model="username"> -->
        <!-- <input type="text" :value="username" @input="username = ($event.target as HTMLInputElement).value"> -->

        <!-- v-model用在html组件标签上 -->
        <Child v-model:ming="username" v-model:mima="password" />
        <!-- <Child :modelValue="username" @update:modelValue="username=$event"/> -->
    </div>
</template>

<script lang="ts" setup name="Father">
    import {ref} from "vue";
    import Child from "./Child.vue";
    //数据
    let username = ref('zhangsan')
    let password = ref('123456')
    //方法

</script>

<style scoped>
.Father{
    background-color: skyblue;
    height: 600px;
}
</style>